<template>
  <div class="echarts">
    <div class="box1">
      <div :id="index" class="table"></div>
    </div>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
      legendList1: [],
      index: Math.random() * 100 + 'ID',
    }
  },
  props: {
    name: {
      type: String,
      default: '',
    },
    num: {
      type: Number,
      default: 0,
    },

    PropData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: {},
    },
  },
  watch: {
    option(val) {
      this.init()
    },
  },
  created() {},
  mounted() {
    console.log('this.option :>> ', this.option)
    this.init()
  },
  methods: {
    init() {
      this.initOPtions()
      this.table1()
    },
    table1() {
      if (this.index) {
        let id = this.index.toString()
        console.log('this.index :>> ', id)
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(id))
        // 使用刚指定的配置项和数据显示图表。
        if (this.option) {
          myChart.setOption(this.option)
        }
      }
    },
    initOPtions() {
      const that = this
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.echarts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .box1 {
    width: 100%;
    height: 100%;
  }

  .table {
    width: 100%;
    height: 100%;
  }
}
</style>
